<div class="tab-motors">
    <div class="content_wrapper">
        <div class="tab_title" i18n="tabMotorTesting">Motors</div>
        <div class="cf_doc_version_bt">
            <a id="button-documentation" href="" target="_blank" rel="noopener noreferrer"></a>
        </div>

        <div class="grid-row grid-box col2">
            <div class="col-span-1">

                <div class="configuration">

                    <!-- MIXER -->
                    <div class="mixer">
                        <div class="gui_box grey">
                            <div class="gui_box_titlebar">
                                <div class="spacer_box_title" i18n="configurationMixer"></div>
                            </div>
                            <div class="spacer_box mixer_settings">
                                <select class="mixerList" id="mixer">
                                    <!-- list generated here -->
                                </select>
                                <div class="motor_direction_reversed">
                                    <div style="float: left; height: 20px; margin-right: 15px; margin-left: 3px;">
                                        <input type="checkbox" id="reverseMotorSwitch" class="toggle" />
                                    </div>
                                    <span class="freelabel" i18n="configurationReverseMotorSwitch"></span>
                                    <div class="helpicon cf_tip" i18n_title="configurationReverseMotorSwitchHelp"></div>
                                </div>
                            </div>
                            <div class="grid-row">
                                <div class="grid-col col6">
                                    <div class="mixerPreview">
                                        <img src="./resources/motor_order/custom.svg" alt="Mixer Preview">
                                    </div>
                                </div>
                            </div>
                            <div class="btn motor_tool_buttons">
                                <a href="#" id="motorOutputReorderDialogOpen" class="tool regular-button" i18n="motorOutputReorderDialogOpen"></a>
                                <a href="#" id="escDshotDirectionDialog-Open" class="tool regular-button" i18n="escDshotDirectionDialog-Open"></a>
                            </div>
                        </div>
                    </div>
                    <!-- END MIXER-->

                    <!-- MOTOR STOP -->
                    <div class="motorstop">
                        <div class="gui_box grey">
                            <div class="gui_box_titlebar">
                                <div class="spacer_box_title" i18n="configurationEscFeatures"></div>
                            </div>
                            <div class="spacer_box">
                                <div id="escProtocolDisabled" class="note">
                                    <p i18n="configurationEscProtocolDisabled"></p>
                                </div>
                                <div class="selectProtocol">
                                    <label>
                                        <select class="escprotocol" id="escprotocol">
                                            <!-- list generated here -->
                                        </select>
                                        <span i18n="configurationEscProtocol"></span>
                                        <div id="escProtocolTooltip" class="helpicon cf_tip" i18n_title="configurationEscProtocolHelp"></div>
                                    </label>
                                </div>
                                <div class="number checkboxPwm">
                                    <div style="float: left; height: 20px; margin-right: 14px; margin-left: 3px;">
                                        <input type="checkbox" id="unsyncedPWMSwitch" class="toggle" />
                                    </div>
                                    <span class="freelabel" i18n="configurationunsyndePwm"></span>
                                </div>
                                <div class="number unsyncedpwmfreq" style="margin-top: 5px; padding-bottom: 10px;">
                                    <label>
                                        <div class="numberspacer">
                                            <input type="number" name="unsyncedpwmfreq" min="200" max="32000" step="100" />
                                        </div>
                                        <span i18n="configurationUnsyncedPWMFreq"></span>
                                    </label>
                                </div>

                                <table class="featuresMultiple">
                                    <tbody class="features escMotorStop">
                                        <!-- table generated here -->
                                    </tbody>
                                    <tbody class="features escSensor">
                                        <!-- table generated here -->
                                    </tbody>
                                </table>
                                <div class="number checkboxDshotBidir">
                                    <div style="float: left; height: 20px; margin-right: 14px; margin-left: 3px;">
                                        <input type="checkbox" id="dshotBidir" class="toggle" />
                                    </div>
                                    <span class="freelabel" i18n="configurationDshotBidir"></span>
                                    <div class="helpicon cf_tip" i18n_title="configurationDshotBidirHelp"></div>
                                </div>
                                <div class="number motorPoles">
                                    <div class="numberspacer">
                                        <input type="number" name="motorPoles" min="4" max="255" step="1"/>
                                    </div>
                                    <span i18n="configurationMotorPolesLong"></span>
                                    <div class="helpicon cf_tip" i18n_title="configurationMotorPolesHelp"></div>
                                </div>
                                <div class="number motorIdle">
                                    <div class="numberspacer">
                                        <input type="number" name="motorIdle" min="0.0" max="20.0" step="0.1"/>
                                    </div>
                                    <span i18n="configurationMotorIdle"></span>
                                    <div class="helpicon cf_tip_wide" i18n_title="configurationMotorIdleHelp"></div>
                                </div>
                                <div class="number idleMinRpm">
                                    <div class="numberspacer noarrows">
                                        <input type="number" name="idleMinRpm" min="0" max="100" step="1" readonly/>
                                    </div>
                                    <span i18n="pidTuningIdleMinRpm"></span>
                                    <div class="helpicon cf_tip" i18n_title="configurationMotorIdleRpmHelp"></div>
                                </div>
                                <div class="number mincommand">
                                    <div class="numberspacer">
                                        <input type="number" name="mincommand" min="0" max="2000" />
                                    </div>
                                    <span i18n="configurationThrottleMinimumCommand"></span>
                                    <div class="helpicon cf_tip" i18n_title="configurationThrottleMinimumCommandHelp"></div>
                                </div>
                                <div class="number minthrottle">
                                    <div class="numberspacer">
                                        <input type="number" name="minthrottle" min="0" max="2000" />
                                    </div>
                                    <span i18n="configurationThrottleMinimum"></span>
                                    <div class="helpicon cf_tip" i18n_title="configurationThrottleMinimumHelp"></div>
                                </div>
                                <div class="number maxthrottle">
                                    <div class="numberspacer">
                                        <input type="number" name="maxthrottle" min="0" max="2000" />
                                    </div>
                                    <span i18n="configurationThrottleMaximum"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END MOTOR_STOP -->

                    <!-- 3D -->
                    <div class="_3d">
                        <div class="gui_box grey">
                            <div class="gui_box_titlebar">
                                <div class="spacer_box_title" i18n="configuration3d"></div>
                            </div>
                            <div class="spacer_box">
                                <table>
                                    <thead>
                                        <tr>
                                            <th i18n="configurationFeatureEnabled"></th>
                                            <th i18n="configurationFeatureDescription"></th>
                                            <th i18n="configurationFeatureName"></th>
                                        </tr>
                                    </thead>
                                    <tbody class="features 3D" id="features_3d" style="margin-bottom:10px;">
                                        <!-- table generated here -->
                                    </tbody>
                                </table>
                                <div class="_3dSettings">
                                    <div class="number">
                                        <label> <input type="number" name="_3ddeadbandlow" step="1" min="1250" max="1600" />
                                            <span i18n="configuration3dDeadbandLow"></span>
                                        </label>
                                    </div>
                                    <div class="number">
                                        <label> <input type="number" name="_3ddeadbandhigh" step="1" min="1400" max="1750" />
                                            <span i18n="configuration3dDeadbandHigh"></span>
                                        </label>
                                    </div>
                                    <div class="number">
                                        <label> <input type="number" name="_3dneutral" step="1" min="1400" max="1600" />
                                            <span i18n="configuration3dNeutral"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END 3D -->
                </div>
                <!-- END CONFIGURATION -->

            </div>
            <div class="col-span-1">

                <!-- MOTOR TEST SECTION -->
                <div class="gui_box motorblock">
                    <div class="spacer">

                    <!-- SENSOR GRAPH SECTION -->
                    <div class="gui_box grey">
                        <div class="graph-grid">
                            <svg id="graph">
                                <g class="grid x" transform="translate(40, 120)"></g>
                                <g class="grid y" transform="translate(40, 10)"></g>
                                <g class="data" transform="translate(41, 10)"></g>
                                <g class="axis x" transform="translate(40, 120)"></g>
                                <g class="axis y" transform="translate(40, 10)"></g>
                            </svg>
                            <div class="plot_control">
                                <div class="table">
                                    <div class="sensor row">
                                        <div class="left-cell motor-button">
                                            <a class="reset_max" href="#" i18n="motorsResetMaximumButton" i18n_title="motorsResetMaximum"></a>
                                        </div>
                                        <div class="right-cell">
                                            <select name="sensor_choice">
                                                <option value="gyro" selected="selected" i18n="motorsSensorGyroSelect"></option>
                                                <option value="accel" i18n="motorsSensorAccelSelect"></option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row-container">
                                        <div class="row">
                                            <div class="left-cell">
                                                <div i18n="sensorsRefresh"></div>
                                            </div>
                                            <div class="rate right-cell">
                                                <select name="rate">
                                                    <option value="10">10 ms</option>
                                                    <option value="20">20 ms</option>
                                                    <option value="30">30 ms</option>
                                                    <option value="40">40 ms</option>
                                                    <option value="50">50 ms</option>
                                                    <option value="100">100 ms</option>
                                                    <option value="250">250 ms</option>
                                                    <option value="500">500 ms</option>
                                                    <option value="1000">1000 ms</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="left-cell">
                                                <div i18n="sensorsScale"></div>
                                            </div>
                                            <div class="scale right-cell">
                                                <select name="scale">
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="left-cell">
                                                X:
                                            </div>
                                            <div class="x value right-cell">
                                                0
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="left-cell">
                                                Y:
                                            </div>
                                            <div class="y value right-cell">
                                                0
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="left-cell">
                                                Z:
                                            </div>
                                            <div class="z value right-cell">
                                                0
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="left-cell">
                                                RMS:
                                            </div>
                                            <div class="rms value right-cell">
                                                0
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="power_info">
                            <span i18n="motorsVoltage" class="power_text"></span><span class="motors-bat-voltage power_value"></span>
                            <span i18n="motorsADrawing" class="power_text"></span><span class="motors-bat-mah-drawing power_value"></span>
                            <span i18n="motorsmAhDrawn" class="power_text"></span><span class="motors-bat-mah-drawn power_value"></span>
                        </div>
                    </div>
                        <div class="motors">
                            <ul class="grid-box col9 titles">
                                <li i18n_title="motorNumber1">1</li>
                                <li i18n_title="motorNumber2">2</li>
                                <li i18n_title="motorNumber3">3</li>
                                <li i18n_title="motorNumber4">4</li>
                                <li i18n_title="motorNumber5">5</li>
                                <li i18n_title="motorNumber6">6</li>
                                <li i18n_title="motorNumber7">7</li>
                                <li i18n_title="motorNumber8">8</li>
                            </ul>
                            <div class="bar-wrapper grid-box col9"></div>
                        </div>
                        <div class="motor_testing">
                            <ul class="grid-box col9 telemetry">
                                <li><span class="motor-0 cf_tip" i18n_title="motorsTelemetryHelp">&nbsp;</span></li>
                                <li><span class="motor-1 cf_tip" i18n_title="motorsTelemetryHelp">&nbsp;</span></li>
                                <li><span class="motor-2 cf_tip" i18n_title="motorsTelemetryHelp">&nbsp;</span></li>
                                <li><span class="motor-3 cf_tip" i18n_title="motorsTelemetryHelp">&nbsp;</span></li>
                                <li><span class="motor-4 cf_tip" i18n_title="motorsTelemetryHelp">&nbsp;</span></li>
                                <li><span class="motor-5 cf_tip" i18n_title="motorsTelemetryHelp">&nbsp;</span></li>
                                <li><span class="motor-6 cf_tip" i18n_title="motorsTelemetryHelp">&nbsp;</span></li>
                                <li><span class="motor-7 cf_tip" i18n_title="motorsTelemetryHelp">&nbsp;</span></li>
                                <li><span class="motor-master cf_tip" i18n_title="motorsTelemetryHelp">&nbsp;</span></li>
                            </ul>
                            <div class="sliders">
                                <ul class="grid-box col9">
                                    <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
                                    <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
                                    <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
                                    <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
                                    <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
                                    <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
                                    <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
                                    <input type="range" min="1000" max="2000" value="1000" disabled="disabled"/>
                                    <input type="range" min="1000" max="2000" value="1000" disabled="disabled" class="master"/>
                                </ul>
                            </div>
                            <div class="values">
                                <ul class="grid-box col9">
                                    <li>1000</li>
                                    <li>1000</li>
                                    <li>1000</li>
                                    <li>1000</li>
                                    <li>1000</li>
                                    <li>1000</li>
                                    <li>1000</li>
                                    <li>1000</li>
                                    <li style="font-weight: bold" i18n="motorsMaster"></li>
                                </ul>
                            </div>
                        </div>
                    <div class="danger">
                        <p i18n="motorsNotice"></p>
                        <input id="motorsEnableTestMode" type="checkbox" class="togglesmall"/>
                        <span class="motorsEnableTestMode" i18n="motorsEnableControl"></span>
                    </div>
                </div>
                <div class="clear-both"></div>
            </div>
            <!-- END MOTOR TEST SECTION -->

            </div>
        </div>

        <div class="clear-both"></div>


    </div> <!-- END CONTENT_WRAPPER -->

    <dialog id="dialog-mixer-reset">
        <div id="dialog-mixer-reset-content-wrapper">
            <div id="dialog-mixer-reset-content"></div>
            <div class="btn dialog-buttons">
                <a href="#" id="dialog-mixer-reset-confirmbtn" class="regular-button right" i18n="motorsDialogSettingsChangedOk"></a>
            </div>
        </div>
    </dialog>

    <dialog id="dialog-settings-changed">
        <div id="dialog-settings-changed-content-wrapper">
            <div id="dialog-settings-changed-content"></div>
            <div class="btn dialog-buttons">
                <a href="#" id="dialog-settings-reset-confirmbtn" class="regular-button" i18n="motorsButtonReset"></a>
                <a href="#" id="dialog-settings-changed-confirmbtn" class="regular-button" i18n="motorsDialogSettingsChangedOk"></a>
            </div>
        </div>
    </dialog>

    <dialog id="dialogMotorOutputReorder">
        <div id="dialogMotorOutputReorderContentWrapper">
            <div id="dialogMotorOutputReorderContent">
            </div>
            <div>
                <a href="#" id="dialogMotorOutputReorder-closebtn" class="regular-button right" i18n="motorOutputReorderDialogClose"></a>
            </div>
        </div>
    </dialog>

    <dialog id="escDshotDirectionDialog">
        <div id="escDshotDirectionDialog-ContentWrapper">
            <div id="escDshotDirectionDialog-Content">
            </div>
            <a href="#" id="escDshotDirectionDialog-closebtn" class="regular-button right" i18n="close"></a>
        </div>
    </dialog>
</div>

<div class="content_toolbar toolbar_fixed_bottom">
    <div class="btn">
        <a class="save disabled" href="#" i18n="motorsButtonSave"></a>
    </div>
    <div class="btn">
        <a class="stop disabled" href="#" i18n="escDshotDirectionDialog-StopWizard"></a>
    </div>
</div>
